<!DOCTYPE html>
<html lang="en">
<head>
    <title>overload 动漫</title>
    <style>
        header{
            background-color:rgb(8, 8, 8);
             border-color: rgb(8, 171, 171);
             border-width: 2px;
           
             
        }

        li{
            display: block;
        }
        li {  
 float: left;  
 width: 100px;  
 height: 20px;  
 margin: 2px;  
 list-style:none;  
 text-align: center;  
 background: rgb(159, 237, 50);  
 display: inline;  
 }  
 a {  
 text-decoration: none;  
 }  
 a:link,a:visited {  
 display:block;  
 font-weight:bold;  
 color:#e31616;  
 background-color:#e1f6254b;  
 text-align:center;  
 text-transform:uppercase;  
 }  
 a:hover,a:active {  
 background-color:rgb(16, 17, 15);  
 } 
 .table-back {  
 border-collapse: collapse;  
 width: 400px;  
 height: 100px;  
   }  
 .table-back th,
 .table-back td {  
 width: 200px;  
 border: 1px solid black;  
 padding: 10px;  
 text-align: center;
 }  
 .table-back th {  
 background-color: rgb(91, 105, 239);  
 color: rgb(248, 246, 246);  
 }  
 div.gallery {
  margin: 10px;
  border: 10px solid rgb(160, 229, 241);
  float: left;
  width: 600px;
  box-shadow: 10px 10px 10px; 
}

div.gallery:hover {
  border: 1px solid rgb(11, 11, 11);
}

div.gallery img {
  width: 600px;
  height:600px;
}
main{
    background: rgb(164, 243, 200);
}

div.desc {
  padding: 15px;
  text-align: center;
  color: #e31616;
}


footer{
	clear:both;
	display:block;
	background-color: rgb(8, 8, 8);
	color:#FFFFFF;
	text-align:center;
	padding:15px;
}
tr{
    background: rgb(19, 230, 117);
}

.a{
   color: dimgray;
}
.b{
    color: darkgoldenrod;
}
tr:nth-child(2n+1){background: rgb(40, 173, 230);

}
    </style>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
   <header>
    <h1  align="middle" style="color:rgb(210, 228, 243);font-size:25px;">
        overload动漫  </h1>
        <img src="https://img0.baidu.com/it/u=1208458298,2060952935&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" width="1400">
  
<br>
<ul>
   
    <li>
        <h2>
            <a href="homework/背景.html" target="_blank">作品背景</a>
        </h2>
    </li> 
    <li>
          <h2>
            <a href="homework/简介.html" target="_blank">剧情简介</a>
          </h2> 
    </li>
    <li>
        <h2>
            <a href="homework/kkk.html" target="_blank">角色介绍</a>
        </h2>
    </li>
</ul>

    
   </header>


  
          
                   
              
                <main> 
                    <table class="table-back">
                        
                        <thead>
                            <th>名字</th>
                            <th>种族</th>
                            <th>属性</th>
                        </thead>
                        <tbody>
                            <tr >
                                <td class="a">骨王</td>
                                <td>死之统治者</td>
                                <td class="b">极恶</td>
                            </tr>
                            <tr>
                                <td class="a" >雅儿贝德</td>
                                <td>小恶魔</td>
                                <td class="b" >极恶</td>
                            </tr>
                            <tr >
                                <td class="a">夏提雅·布拉德弗伦 </td>
                                <td>真祖</td>
                                <td class="b">邪恶~极恶</td>
                            </tr>
                            
                            <tr>
                                <td class="a">亚乌菈·贝拉·菲欧拉 </td>
                                <td>黑暗精灵</td>
                                <td class="b">中立~邪恶</td>
                            </tr>
                            <tr >
                                <td class="a">马雷·贝罗·菲欧雷 </td>
                                <td>黑暗精灵</td>
                                <td class="b">中立~邪恶</td>
                            </tr>
                            <tr>
                              <td class="a">迪米乌哥斯 </td>
                              <td>最高阶恶魔</td>
                              <td class="b">极恶</td>
                            </tr>
                            <tr >
                              <td class="a">塞巴斯·蒂安</td>
                              <td>龙人</td>
                              <td class="b">极善</td>
                            </tr>
                            <tr>
                              <td class="a">潘多拉·亚克特</td>
                              <td>高阶二重幻影</td>
                              <td class="b">中立</td>
                            </tr>
                            
                        </tbody>
                       
                    </table>

                    <div class="gallery">
                        
                          <img src="homework/1.webp" >
                        </a>
                        <div class="desc">骨王</div>
                      </div>
                      
                      <div class="gallery">
                        
                          <img src="homework/2.webp">
                        </a>
                        <div class="desc">塞巴斯·蒂安</div>
                      </div>
                      
                      <div class="gallery">
                        
                          <img src="homework/3.webp">
                        </a>
                        <div class="desc">马雷·贝罗·菲欧雷 </div>
                      </div>
                
                      <div class="gallery">
                        
                          <img src="homework/4.webp" >
                        </a>
                        <div class="desc">亚乌菈·贝拉·菲欧拉</div>
                      </div>
                
                      <div class="gallery">
                       
                          <img src="homework/4e17bd5b2a2eba8377694bf6b49a83a9c296ef9c.jpg@825w_900h_progressive.webp" >
                        </a>
                        <div class="desc">迪米乌哥斯</div>
                      </div>
                
                      <div class="gallery">
                        
                          <img src="homework/5.webp" >
                        </a>
                        <div class="desc">夏提雅·布拉德弗伦</div>
                      </div>
                
                      <div class="gallery">
                       
                          <img src="homework/6.webp">
                        </a>
                        <div class="desc">雅儿贝德</div><br />
                      </div>
                
                      <div class="gallery">
                       
                        <img src="homework/7.webp">
                      </a>
                      <div class="desc">潘多拉·亚克特</div><br />
                    </div>
                   
   
   </main>

   <footer>
  <h1>本页面关于overload动漫</h1>
        <br>
        <h1>
            感谢观看！
        </h1>
        
        
    
 
   </footer>
   
</body>
</html>